<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/login.css" rel="stylesheet" />
		
		<style type="text/css">
			.form_input{
				position: absolute;
				top: 60px;
				width: 90%;
				left: 5%;
				border-radius: 10px;
				outline: none;
				padding: 0;
				height: 200px;
			}
			#forword{
				margin-top: -60px;
			}
		</style>
		
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="mui-content">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">添加卡片</h1>
			</header>
			<form class="mui-input-group form_input">
				<div class="mui-input-row">
					<label>卡片名称</label>
					<input id="u_account_name" type="text" class="mui-input-clear email" placeholder="请输入名称" name="email" id="" value="" />
				</div>
				<div class="mui-input-row">
					<label>卡片号码</label>
					<input id="u_account_num" type="text" class="mui-input-clear password" placeholder="请输入16位号码" name="email" id="" value="" />
				</div>
				<div class="mui-input-row">
					<label>初始金额</label>
					<input id="u_account_amount" type="text" class="mui-input-clear password" placeholder="请输入数字" name="email" id="" value="" />
				</div>
				<div class="mui-button-row submit">
					<button id="register_btn" type="button" class="mui-btn mui-btn-primary">添加</button>
					<button id="exit_btn" type="button" class="mui-btn mui-btn-danger">取消</button>
				</div>
			</form>
			<div id="forword">
				<a class="f2" id="f" style="margin-left: 255px;">遇到问题?</a>
			</div>
			
		</div>
		
		<script type="text/javascript">
			
			document.getElementById('f').addEventListener('tap',function(){
				mui.openWindow({
					url: 'help_page.html',
					id: 'help_page.html',
				})
			})
			
			document.getElementById("u_account_name").addEventListener('input',function(){
				var re1 = /^[\u4e00-\u9fa5]{2,}$/
				var bro = this.parentNode.firstElementChild;
				if(re1.test(this.value)){
					bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}else{
					bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}
			});
			
			document.getElementById("u_account_num").addEventListener('input',function(){
				var re1 = /^[0-9]{16}$/
				var bro = this.parentNode.firstElementChild;
				if(re1.test(this.value)){
					bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}else{
					bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}
			});
			
			document.getElementById("u_account_amount").addEventListener('input',function(){
				var re1 = /^(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)$/
				var bro = this.parentNode.firstElementChild;
				if(re1.test(this.value) & this.value.length<=12){
					bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}else{
					bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}
			});
	
			document.getElementById('register_btn').addEventListener('tap',function(){
				this.setAttribute('disabled','false');
				this.innerHTML = '添加中';
				var account_name = document.getElementById('u_account_name').value;
				var account_num = document.getElementById('u_account_num').value;
				var account_amount = document.getElementById('u_account_amount').value;
				var re1 = /^[\u4e00-\u9fa5]{2,}$/
				var re2 = /^[0-9]{16}$/
				var re3 = /^(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)$/
				if(!re1.test(account_name) || !re2.test(account_num) || !re3.test(account_amount) || account_amount.length>12){
					mui.toast('请正确填入卡片信息');
					this.removeAttribute('disabled');
					this.innerHTML = '添加';
					return;
				}
				// 将数字正确初始化
				var account_amount = parseFloat(account_amount).toFixed(2)
				var user_id = localStorage.getItem('uid');
				mui.ajax(localStorage.getItem('request_url')+'cost/account/?token='+localStorage.getItem('uid'),{
				    data:"account_name=" + account_name + "&account_num=" + account_num + "&account_amount=" + account_amount + "&user_id=" + user_id,
				    dataType:'json',  
				    type:'post',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:60000,  
				    success:function show(e){
						mui.alert('卡号:'+ e.data.account_num+'添加成功!')
						// 同时加载新卡
						account();
						mui.back()
					},  
				    error:function(xhr,type,errorThrown){
				        var data = JSON.parse(xhr.responseText)
				        if (data.code==0){
				        	mui.toast('添加失败,您输入信息不符合我们的约定哦')
				        }else{
				        	mui.toast(data.msg)
							mui.toast(data.data.rule)
				        }
				    }  
				});
				this.removeAttribute('disabled');
				this.innerHTML = '添加';
			});
			
			// 银行卡接口
			function account(){
				mui.ajax(localStorage.getItem('request_url')+ "cost/user/show_my_account/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid'),
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						var account_list = []
						var account_id = {}
						for(i=0;i<e.data.length;i++){
							// mui.alert(1)
							var dict = {'title': e.data[i].account_name + '          ' + e.data[i].account_num}
							account_list.push(dict);
							account_id[e.data[i].account_num] = e.data[i].account_id;
						}
						localStorage.setItem('account_list',JSON.stringify(account_list));
						localStorage.setItem('account_id',JSON.stringify(account_id));
						mui.toast('😃更新完成...');
					},  
				    error:function(xhr,type,errorThrown){
						mui.toast('😃更新完成...');
				    }  
				});
			};
			
			document.getElementById('exit_btn').addEventListener('tap', function(){
				mui.back();
			});
			
		</script>
	</body>

</html>

